{include file="public/head"/}

<style>
    i img {
        width: 20px;
    }
</style>
<div class="container-fluid" id="main">
    <div class="row clearfix" id="search-box" style="margin-top:0">
        <div class="col-md-12 column text-right">
            <div class="form-inline" style="text-align: right;">
                    <div class="form-group">
                            <input type="text" class="form-control" id="searchText" value="" placeholder="{:lang('please_enter_a_function_name')}">
                            <input type="text" class="form-control" id="control" value="" placeholder="{:lang('please_enter_the_conroller')}">
                        </div>
                        <div class="form-group">
                            <button type="" @click="getSearchText()" class="btn btn-default">{:lang('search')}</button>
                        </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
            <div id="notice"></div>
        </div>
    </div>


    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('function_list')}</div>


        <div class="row clearfix">
            <div class="col-md-6 col-md-offset-6 col-sm-8 col-sm-offset-4 column text-right">
                <div>
                    <div  class="form-inline" role="form">
                    <a href="{:url('menu/addopen',array('request'=>'add'))}" class='btn btn-sm btn-primary option-del' data-toggle="modal" data-target="#prosModal">{:lang('add_top_menu')}</a>
                    </div   >
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                        <tr>
                            <th  style="padding-left: 20px">ID</th>
                            <th  style="padding-left: 20px">功能名称</th>
                            <th>{:lang('controller')}</th>
                            <th>{:lang('method')}</th>
                            <th>{:lang('model_name')}</th>
                            <th>{:lang('locking')}</th>
                            <th>{:lang('classify')}</th>
                            <th style="text-align: center">{:lang('operate')}</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr v-for="(item,index) in datalist" v-if="item.is_show">
                            <td  style="padding-left: 20px">{{item.id}}</td>
                            <td>
                                <template v-for="(itemlevel,indexlevel) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                                <a href="javascript:;" class="menuname" @click="changemenuname(item.id,item.toggle,item.pid)">
                                    <i v-if="item.child > 0" style="margin-right: 20px;">
                                            <span  v-if="item.toggle" ><span class="glyphicon glyphicon-minus" style="margin-right:0"></span></span>
                                            <span  v-if="!item.toggle" ><span class="glyphicon glyphicon-plus" style="margin-right:0"></span></span>
                                    </i>
                                    <i v-if="item.child == 0" style="width: 20px;height: 20px;display: inline-block;margin-right: 20px;"></i>
                                    <span v-if="item.child > 0" :class="['glyphicon', item.style]"></span>
                                    {{item.content}}
                                </a>
                            </td>
                            <td>{{item.control}}</td>
                            <td>{{item.option}}</td>
                            <td>{{item.style}}</td>
                            <td>{{item.is_disable}}</td>
                            <td>{{item.drank}}</td>
                            <td style="text-align: right">
                                <div>
                                    <a :href="'/admin/menu/addopen?id='+item.id+'&request=add'" class='btn btn-sm btn-primary option-del' data-toggle="modal" data-target="#prosModal">{:lang('add_sub-functions')}</a>
                                    <a :href="'/admin/menu/editopen?id='+item.id+'&pid='+item.pid+'&request=edit'" class='btn btn-sm btn-default option-recover' data-toggle="modal" data-target="#prosModal">{:lang('edit')}</a>
                                    <a href="#" class="btn btn-sm btn-default option-hide" @click="evdel(item.id,1)" v-if="item.disable=='0'"><span class="fa fa-lock"></span>{:lang('locking')} </a>
                                    <a href="#" class="btn btn-sm btn-default option-hide" @click="evdel(item.id,0)" v-if="item.disable=='1'"><span class="fa fa-unlock"></span>{:lang('unlock')} </a>
                                    <!-- <a  href="#" data-id="{item.id}" class='btn btn-sm btn-default option-clear' @click="evdel(item.id)" v-if="item.disable!='1'">{:lang('delete')}</a> -->
                                    <a href="javascript:;" class='btn btn-sm btn-danger option-clear'@click="requestDelete(item.id)" v-if="item.disable==1"><span class="glyphicon glyphicon-fire"></span> {:lang('clear')}</a>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align: center;"  v-if="datalist.length==0">
                                <td colspan="8">{:lang('no_data')}</td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>



    </div>
</div>

<!--弹窗部分 开始-->
<div class="modal fade" id="prosModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" style="width:50%">
        <div class="modal-content">
        </div>
    </div>
</div>
<script>
    $("#prosModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>
<script src="/static/Admin/js/menu.js"></script>
{include file="public/foot"/}